<template>
    <div>
        <el-dialog :visible.sync="value" fullscreen>

            <div style="text-align: center;margin-bottom: 30px">
                <span>你的总分是:</span> <span style="color:red;font-weight: normal;font-size: 30px">{{studentResultArray.score.score}}</span><span>分</span>
            </div>


            <el-timeline  v-if="data.singleList && data.singleList.length > 0">
                <el-timeline-item :color="singleAskList[index] ==  single.singleAsk? '#0bbd87' : '#F56C6C'"  :icon="singleAskList[index] ==  single.singleAsk?'el-icon-circle-check':'el-icon-circle-close'" :timestamp="'第' + (index + 1) + '道单选题'"  placement="top" v-for="(single,index) in data.singleList" :key="single.id">
                    <el-card shadow="never" style="border:0rem;background-color: lightgoldenrodyellow;">
                        <template slot="header">
                            <h3 style="margin:0px 0px 20px 0px;display : inline-block" v-html="single.singleContent"></h3>
                        </template>
                        <el-radio-group v-model="singleAskList[index]">
                            <el-radio label="1" disabled style="margin:0px 0px 10px 0px">A: {{single.singleOptionA}}</el-radio><br/>
                            <el-radio label="2" disabled style="margin:0px 0px 10px 0px">B: {{single.singleOptionB}}</el-radio><br/>
                            <el-radio label="3" disabled style="margin:0px 0px 10px 0px">C: {{single.singleOptionC}}</el-radio><br/>
                            <el-radio label="4" disabled style="margin:0px 0px 10px 0px">D: {{single.singleOptionD}}</el-radio><br/>
                        </el-radio-group>
                        <div>
                            <el-tag type="info" size="mini">正确答案 : {{format_single(single.singleAsk)}}</el-tag>
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <el-timeline v-if="data.selectionList && data.selectionList.length > 0">
                <el-timeline-item :color="checkboxAskList[index] == selection.selectionAsk ? '#0bbd87' : '#F56C6C'" :icon="checkboxAskList[index] == selection.selectionAsk ? 'el-icon-circle-check':'el-icon-circle-close'" :timestamp="'第' + (index + 1) + '道多选题'"  placement="top" v-for="(selection,index) in data.selectionList" :key="selection.id">
                    <el-card shadow="never" style="border:0rem;background-color: aliceblue">
                        <template slot="header">
                            <h3 style="margin:0px 0px 20px 0px;display : inline-block" v-html="selection.selectionContent"></h3>
                        </template>
                        <CheckboxGroup v-model="checkboxAskList[index]">
                            <Checkbox label="1" disabled style="margin:0px 0px 10px 0px">
                                <span>A. {{selection.selectionOptionA}}</span>
                            </Checkbox><br/>
                            <Checkbox label="2" disabled style="margin:0px 0px 10px 0px">
                                <span>B. {{selection.selectionOptionB}}</span>
                            </Checkbox><br/>
                            <Checkbox label="3" disabled style="margin:0px 0px 10px 0px">
                                <span>C. {{selection.selectionOptionC}}</span>
                            </Checkbox><br/>
                            <Checkbox label="4" disabled style="margin:0px 0px 10px 0px">
                                <span>D. {{selection.selectionOptionD}}</span>
                            </Checkbox><br/>
                        </CheckboxGroup>
                        <div>
                            <el-tag type="info" size="mini">正确答案 : {{format_selection(selection.selectionAsk)}}</el-tag>
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <el-timeline v-if="data.askList && data.askList.length > 0">
                <el-timeline-item :timestamp="'第' + (index + 1) + '道问答题'" placement="top" v-for="(ask,index) in data.askList" :key="ask.id">
                    <el-card shadow="never" style="border:0rem;background-color: #F2F6FC;">
                        <template slot="header">
                            <h3 style="margin:0px 0px 20px 0px;display : inline-block" v-html="ask.askContent"></h3>
                        </template>
                        <div>
                            <h4 style="margin:0px 0px 20px 0px;display : inline-block"><el-tag type="info" size="mini" style="margin:0px 10px 0px 0px">回答</el-tag>{{askList[index]}}</h4>
                        </div>
                        <div>
                            <font style="margin:0px 0px 20px 0px;display : inline-block;color:green"><el-tag type="info" size="mini" style="margin:0px 10px 0px 0px;">解析</el-tag>{{ask.askAnalysis}}</font>
                        </div>
                        <div>
                            <font style="margin:0px 0px 20px 0px;display : inline-block;color:green"><el-tag type="info" size="mini" style="margin:0px 10px 0px 0px;">评语</el-tag>{{teacherCommentList[index]}}</font>
                        </div>
                        <div>
                            <el-tag type="info" size="mini" style="margin:0px 10px 0px 0px">得分</el-tag>
                            <font style="margin:0px 0px 20px 0px;display : inline-block;color:green">{{scoreList[index]}}</font>
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <el-timeline>
                <el-timeline-item :timestamp="'第' + (index + 1) + '道上机题'"  placement="top" v-for="(upper,index) in data.upperList" :key="upper.id">
                    <el-card shadow="never" style="border:0rem;background-color: mistyrose;">
                        <template slot="header">
                            <el-link style="margin-left: 30px;" type="danger" :href="upper.upperUrl">下载素材</el-link>
                        </template>
                        <h3 style="margin:0px 0px 20px 0px;display : inline-block" v-html="upper.upperContent"></h3>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
</template>

<script>

    import { goBackStudentExamData } from "@/api/student/student-exam";
    import { explainExam } from '@/api/academic/exam'

    export default {
        name: "student-exam-result",
        data(){
            return {
                value : false,
                parentData:{},
                data:{},
                singleAskList:[],
                checkboxAskList:[],
                askList:[],
                scoreList:[],
                teacherCommentList:[],
                studentResultArray:{single:[],selection:[],ask:[],score:0}
            }
        },
        watch:{
            value(data){
                if(data){
                    explainExam(this.parentData).then(res=>{
                        if(res.data.success){
                            this.data = res.data.data;
                        }
                    }); //渲染完成之后

                    setTimeout(()=>{
                        goBackStudentExamData(this.parentData).then(res=>{
                            let { askResults ,selectionResults , singleResults,score} = res.data.data;
                            this.studentResultArray.ask = askResults;
                            this.studentResultArray.single = singleResults;
                            this.studentResultArray.selection = selectionResults;
                            this.studentResultArray.score = score;
                        });
                    },500)
                }
            },
            'studentResultArray.single'(data){
                if(data && data.length > 0){
                    this.singleAskList = [];
                    data.forEach(item=>{
                        if(item){
                            this.singleAskList.push(item.optionIds);
                        }
                    })
                }
            },
            'studentResultArray.selection'(data){
                if(data && data.length > 0){
                    this.checkboxAskList = [];
                    data.forEach(item=>{
                        if(item){
                            this.checkboxAskList.push(item.optionIds.split(","));
                        }
                    });
                }
            },
            'studentResultArray.ask'(data){
                if(data && data.length > 0){
                    this.askList = [];
                    this.teacherCommentList = [];
                    this.scoreList = [];
                    data.forEach(item=>{
                        if(item){
                            this.askList.push(item.askAnswer);
                            this.teacherCommentList.push(item.teacherComment);
                            this.scoreList.push(item.score);
                        }
                    })
                }
            }
        },
        methods:{
            format_selection(data){ //处理多选题答案的工具方法
                let array = [];

                if(data.includes("1")){ //1,3 A,C
                    array.push("A");
                }
                if(data.includes("2")){
                    array.push("B");
                }
                if(data.includes("3")){
                    array.push("C");
                }
                if(data.includes("4")){
                    array.push("D");
                }

                return array.join(",");
            },
            format_single(data){
                switch (data) {
                    case '1':
                        return "A";
                    case "2":
                        return "B";
                    case "3":
                        return "C";
                    case "4":
                        return "D";
                }
            }
        }
    }
</script>

<style scoped>

</style>